<template>
	<div style="background-color: #f6f6f6;">
		<top-nav bgColor="white" title="历史订单"  btnName="保存"  :rightShow="false" returnPath="上一级" ></top-nav>
		
		<div style="display: flex;justify-content:flex-start;align-items: center;margin-top: 3rem;flex-direction:column;background-color: white;">
				<mu-date-picker :fullWidth="noFull" v-model="startTime" hintText="开始时间"/>
				<mu-date-picker :fullWidth="noFull" v-model="endTime"   hintText="结束时间"/>
			<section style="height: 4rem;flex-direction:row-reverse;width: 100%;display: flex;">
				<mu-raised-button label="查询" style="margin-right: 1rem;" class="demo-raised-button" @click="search()"  primary/>

			</section>
		</div>
		
		<div style="display: flex;flex-direction: column;margin-top: 0.4rem;">
			<section v-for="item in filterArr" style="display: flex;flex-direction: row;background: white;margin: 0.4rem 0.8rem;">
				<section style="flex: 1;flex-direction:column;display: flex;">
					<span class="item-style">
						单据编号：{{item.No}}
					</span>
					<span class="item-style">
						车牌号：{{item.carNo}}
					</span>
					<span class="item-style">
						产品：{{item.product}}
					</span>
					<span class="item-style">
						结算数量：{{item.jiesuanShu}}
					</span>
					<span class="item-style">
						开票时间：{{item.kaipiaoTime}}
					</span>
					<span class="item-style">
						出厂时间：{{item.chuchangTime}}
					</span>
					
				</section>
				<section style="flex: 1;flex-direction: column;display: flex;">
					<span class="item-style">
						产品单价：{{item.proPrice}}
					</span>
					<span class="item-style">
						扣除金额：{{item.kouchuPrice}}
					</span>
					<span class="item-style">
						皮重：{{item.piZhong}}
					</span>
					<span class="item-style">
						毛重：{{item.maoZhong}}
					</span>
					<span class="item-style">
						开始时间：{{item.startTime}}
					</span>
					<span class="item-style">
						结束时间：{{item.endTime}}
					</span>
				</section>
				
			</section>
		</div>
		

	</div>
</template>

<script>
	import TopNav from '@/components/nav/topNav.vue'
	export default {
		
		components: {
		    TopNav,
		},
		data(){
			return{
				noFull:false,
				arr:[],
				startTime:null,
				endTime:null,
				filterArr:[
					{
						'No':10001,
						'carNo':'鲁N235785',
						'product':'成人自动跑机',
						'jiesuanShu':50,
						'kaipiaoTime':'2018-05-11',
						'chuchangTime':'2018-05-7',
						'proPrice':'18.5',
						'kouchuPrice':'60',
						'piZhong':'800kg',
						'maoZhong':'750kg',
						'startTime':'2018-04-25',
						'endTime':'2018-05-16',
					},
					{
						'No':10002,
						'carNo':'鲁N235785',
						'product':'成人自动跑机',
						'jiesuanShu':50,
						'kaipiaoTime':'2018-05-11',
						'chuchangTime':'2018-05-7',
						'proPrice':'18.5',
						'kouchuPrice':'60',
						'piZhong':'800kg',
						'maoZhong':'750kg',
						'startTime':'2018-04-25',
						'endTime':'2018-05-16',
					},
				]
			}
		},
		watch:{
			startTime(){
				console.info(this.startTime)
			},
			endTime(){
				console.info(this.endTime)
			}
		},
		mounted(){
			
		},
		methods:{
			search(){
				console.info(this.startTime)
				console.info(this.endTime)
			}
		}
	}
</script>

<style>
	.item-style{
		width: 100%;
		height: 1.8rem;
		line-height: 1.8rem;
		text-align: left;
		text-indent: 1rem;
	}
</style>